<template>
        <el-form :model="form" :rules="rules" ref="formValid">
        <el-form-item label="负责人" >
            <el-select v-model="form.ownerId" placeholder="请选择负责人" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.owner" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="所属活动">
            <el-select v-model="form.activityId" placeholder="请选择活动" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.activity" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" >
            <el-input v-model="form.fullName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="称呼">
            <el-select v-model="form.appellation" placeholder="请选择称呼" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.appellation" :label="item.type_value" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" :prop="id?'':'phone'">
            <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="微信" :label-width="formLabelWidth" >
            <el-input v-model="form.weixin" autocomplete="off" />
        </el-form-item>
        <el-form-item label="QQ" :label-width="formLabelWidth" >
            <el-input v-model="form.qq" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" >
            <el-input v-model="form.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职业" :label-width="formLabelWidth" >
            <el-input v-model="form.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年收入" :label-width="formLabelWidth" >
            <el-input v-model="form.yearIncome" autocomplete="off" />
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth" >
            <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="贷款">
            <el-select v-model="form.needLoan" placeholder="请选择是否贷款" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.needLoan" :label="item.type_value" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="意向状态">
            <el-select v-model="form.intentionState" placeholder="请选择意向状态" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.intentionState" :label="item.type_value" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="意向产品">
            <el-select v-model="form.intentionProduct" placeholder="请选择意向产品" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.product" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="线索状态">
            <el-select v-model="form.state" placeholder="请选择线索状态" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.clueState" :label="item.type_value" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="线索来源" >
            <el-select v-model="form.source" placeholder="请选择线索来源" @click="getUserOption" style="width: 140px">
                <el-option v-for="item,index in option.source" :label="item.type_value" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="线索描述">
            <el-input v-model="form.description" autocomplete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
            <el-button type="primary" @click="back">返回</el-button>
            <el-button type="primary" @click="submit(formValid)">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { doGet, doPost } from '@/util/axios';
import { useCounterStore } from '@/stores/counter';
import { notify } from '@/util/notification';
import { computed, onMounted, ref, watch} from 'vue';
import { useRouter,useRoute } from 'vue-router';
let store=useCounterStore()
let Route=useRoute()
let Router=useRouter()
let id=Route.params.id
let form=ref({})
let editDate=ref({})
let option=ref({})
let formValid={}
let rules={
  phone:[
  { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern:/^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入合法手机号', trigger: 'blur' },
    { 'validator':validate, trigger:'blur'}
  ]
} 
onMounted(()=>{
    getOption()
    if(id){
        setForm()
    }
})
function setForm(){
    editDate.value=store.data
    console.log(editDate.value)
    Object.keys(editDate).forEach(v=>{
        if (form.hasOwnProperty(v)) {  
            form[v] = editDate[v];
        }  
    })
    form.value.ownerId=editDate.value.owner
    form.value.activityId=editDate.value.activity
    form.value.appellation=editDate.value.gender
    form.value.needLoan=editDate.value.isNeed
    form.value.intentionState=editDate.value.inclinationStatus
    form.value.intentionProduct=editDate.value.inclinationProduct
    form.value.state=editDate.value.status
    form.value.source=editDate.value.clueSource
}
function getOption(){
    doGet("/gtetOption").then(res=>{
        console.log(res.data.data)
        option.value=res.data.data
    })
}
function validate(rule,value,callback){
    doGet("/validate",{phone:value}).then(res=>{
        // 检查响应状态码  
        if (res.data.code === 200) {  
            // 如果状态码为200，表示验证通过  
            callback();  
        } else {  
            // 如果状态码不是200，表示验证失败  
            callback(new Error("该手机号已经录入"));  
        }  
    })
}
function submit(formValid){
  if (!formValid) return
    formValid.validate((valid, fields) => {
    if (valid) {
        if(id){
            doPost("/editClue",form.value).then(res=>{
                if(res.data.code==200){
                notify("修改成功","success")
                form.value={}
                }else{
                notify("修改失败","error")
                }
            })
        }else{
            doPost("/addClue",form.value).then(res=>{
                if(res.data.code==200){
                notify("添加成功","success")
                form.value={}
                }else{
                notify("添加失败","error")
                }
            })
        }
    } else {
      console.log('error submit!', fields)
    }
  })
}
function back(){
    Router.back()
}
</script>

<style scoped></style>